<template>
  <div>
    <el-table :data="allActivities" style="width: 100%" empty-text="暂无数据">
      <el-table-column label="活动名称" prop="name"></el-table-column>
      <el-table-column label="活动类型" prop="type">
        <template slot-scope="scope">
          {{ getActivityType(scope.row.type) || '\\' }}
        </template>
      </el-table-column>
      <el-table-column label="创建者ID" prop="creatorId">
        <template slot-scope="scope">
          {{ scope.row.creatorId || '\\' }}
        </template>
      </el-table-column>
      <el-table-column label="报名时间" width="180">
        <template slot-scope="scope">
          {{ scope.row.activitySignStartTime.substring(0,10) || '\\' }}--{{ scope.row.activitySignEndTime.substring(0,10) || '\\' }}
        </template>
      </el-table-column>
      <el-table-column label="活动时间" width="180">
        <template slot-scope="scope">
          {{ scope.row.activityConStartTime.substring(0,10) || '\\' }}--{{ scope.row.activityConEndTime.substring(0,10) || '\\' }}
        </template>
      </el-table-column>
      <el-table-column label="活动人数">
        <template slot-scope="scope">
          {{ scope.row.activityNum || '0' }}/{{ scope.row.activityMaxNum || '不限' }}
        </template>
      </el-table-column>
      <el-table-column label="活动详情" width="300">
        <template slot-scope="scope">
          <div v-html="scope.row.activityDescription || '\\'"></div>
        </template>
      </el-table-column>
      <el-table-column label="活动状态">
      <template slot-scope="scope">
        {{ getActivityStatus(scope.row.status) || '\\' }}
      </template>
    </el-table-column>
      <!-- 其他活动属性列 -->
      <!-- ... -->

      <!-- 示例中省略了其他列，请根据实际需求添加更多列 -->

    </el-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getAllActivity } from '../../../../api/activity'

export default {
  name: 'ActivityPage',
  computed: {
    ...mapGetters({
      userRole: 'user/getUserRole',
      userAccount: 'user/getUserAccount',
      userId: 'user/getUserId'
    })
  },
  data () {
    return {
      allActivities: [] // 存储获取到的活动数组
    }
  },
  mounted () {
    this.getAllActivity()
  },
  methods: {
    getActivityStatus (status) {
      switch (status) {
        case 1:
          return '草稿'
        case 2:
          return '已发布(审核中)'
        case 3:
          return '审核通过'
        case 4:
          return '审核未通过'
        case 5:
          return '发布成功'
        default:
          return '未知状态'
      }
    },
    getActivityType (type) {
      // 根据活动类型返回相应文本，你可以根据需求自定义类型名称
      // 类似的方法来判断和返回活动类型的名称
      // 例如：1 表示 '公益活动'，2 表示 '运动活动' 等等
      // 此处为示例，你需要根据实际情况修改
      if (type === 1) {
        return '线上'
      } else if (type === 2) {
        return '校内'
      } else {
        return '校外'
      }
    },
    getAllActivity () {
      getAllActivity().then(result => {
        this.allActivities = result
      })
    }
  }
}
</script>

<style scoped>
/deep/ .el-table__header{
  background-color: transparent;
}
.el-table__header{
  background-color: transparent;
}
/*最外层透明*/
/deep/ .el-table, /deep/ .el-table__expanded-cell{
  background-color: transparent;
}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
}
/* 删除表格下最底层的横线 */
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
.el-table th.el-table__cell{
  background-color: transparent;
}
/* 表格表头字体颜色 */
.el-table thead {
  color: #ffffff;
  font-weight: 500;
}
/* 在这里添加您的 scoped 样式 */
</style>
